<template>
  <div>
    <el-dialog
      title="关联分类"
      :close-on-click-modal="false"
      :visible.sync="visible"
    >
      <el-form :inline="true">
        <el-form-item>
          <el-button type="primary" @click="addRelationHandle()"
            >新增</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-cascader
            v-model="catalogPath"
            :options="categroys"
            :show-all-levels="false"
            :props="props"
            filterable
          ></el-cascader>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        style="width: 100%"
      >
        <el-table-column
          prop="brandName"
          header-align="center"
          align="center"
          label="品牌名"
        >
        </el-table-column>
        <el-table-column
          prop="catalogName"
          header-align="center"
          align="center"
          label="分类名称"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="200"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="deleteHandle(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>



<script>
export default {
  components: {},
  data() {
    return {
      visible: false,
      dataList: [],
      dataListLoading: false,
      categroys: [],
      catalogPath: [],
      brandId: 0,
      props: {
        value: "catId",
        label: "name",
        children: "children",
      },
    };
  },
  methods: {
    init(id) {
      this.catalogPath = [];
      this.visible = true;
      this.brandId = id;
      this.getCategroys();
      this.$http({
        url: this.$http.adornUrl(
          `/sky-mall-product/pmsCategoryBrandRelation/listByBrandId/${id}`
        ),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.data;
        }
      });
    },
    getCategroys() {
      this.$http({
        url: this.$http.adornUrl("/sky-mall-product/pmsCategory/list/tree"),
        method: "get",
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.categroys = data.data;
        }
      });
    },
    // 新增关联关系
    addRelationHandle() {
      this.$http({
        url: this.$http.adornUrl(
          "/sky-mall-product/pmsCategoryBrandRelation/add"
        ),
        method: "post",
        data: {
          brandId: this.brandId,
          catalogId: this.catalogPath[this.catalogPath.length - 1],
        },
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.init(this.brandId);
          this.$message.success("关联成功");
        }
      });
    },
    // 移除关联关系
    deleteHandle(id){
      this.$http({
        url: this.$http.adornUrl(
          "/sky-mall-product/pmsCategoryBrandRelation/delete"
        ),
        method: "delete",
        params: {
          id: id
        },
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.init(this.brandId);
          this.$message.success("移除关联成功");
        }
      });
    }
  },
};
</script>
